<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div></div>
		<button>开始</button>
		<button>结束</button>
		<script>
			var a = 0; //秒
			var b = 0; //分
			var c = 0; //时
			let odiv = document.querySelector('div')
			let obutton1 = document.querySelectorAll('button')[0];
			let obutton2 = document.querySelectorAll('button')[1];
			chongzhi();

			function chongzhi() {
				odiv.innerHTML = '0' + c + ':' + 0 + b + ':' + 0 + a;
			}
			//开始计时
			obutton1.addEventListener('click', function() {
				let int = setInterval(function() {
					a += 1;
					if (a === 60) {
						a = 0;
						b += 1;
						if (b === 60) {
							c += 1;
						}
					}
					if (a < 10 && b < 10) {
						odiv.innerHTML = "0" + c + ':' + 0 + b + ':' + 0 + a;
					} else if (a < 10 && b > 10) {
						odiv.innerHTML = "0" + c + ':' + b + ':' + 0 + a;
					} else if (a >= 10 && b < 10) {
						odiv.innerHTML = "0" + c + ':' + 0 + b + ':' + a;
					} else if (a >= 10 && b >= 10) {
						odiv.innerHTML = "0" + c + ':' + b + ':' + a;
					}
				}, 1000);
				//结束
				obutton2.addEventListener('click', function() {
					clearInterval(int);
				});
			});
		</script>
	</body>
</html>
